Vue-Element-Admin

基于VUE2.0 还有ElelmentUI 2.0（一套基于 Vue 2.0 的桌面端组件库）。Element UI 是一套采用 Vue 2.0 作为基础框架实现的组件库，它面向企业级的后台应用，能够帮助你快速地搭建网站，研发的人力与时间成本会小很多。ui多样化，丰富的组件以及良好的兼容性。

相关技术插件（技术栈主要采用vue+element+axios由webpack2打包）

  • vuejs2.0：渐进式JavaScript框架，易用、灵活、高效，似乎任何规模的应用都适用。
  • element：基于vuejs2.0的ui组件库。
  • vue-router：一般单页面应用spa都要用到的前端路由。
  • axios: 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js
  • echarts
  • file-saver
  • js-cookie
  • nprogress
  • vue-multiselect
  • vuex
  • clipboard
  • codemirror

特性

  • 基于 npm + webpack + babel 开发
  • 全面、灵活且强大的ui组件，API友好
  • 样式基于element UI组件框架，组件丰富，布局简单、响应式
  • 可定制化
登陆注销 ✔︎ icons组件 ✔︎
权限验证 ✔︎ sticky ✔︎
侧边栏 ✔︎ excel上传 ✔︎
面包屑 ✔︎ 时间日期选择器 ✔︎
富文本编辑器 ✔︎ 表格组件 ✔︎
Markdown编辑器 ✔︎ 动态表格组件 ✔︎
Json编辑器 ✔︎ 单选多选组件 ✔︎
列表拖拽 ✔︎ 弹窗组件 ✔︎
CountTo ✔︎ 分页组件 ✔︎
echarts图表 ✔︎ 对话框组件 ✔︎
导出excel文件 ✔︎ 开关滑块组件 ✔︎
动态侧边栏 ✔︎ 自定义主题 ✔︎
前端可视化Excel ✔︎ 下拉菜单组件 ✔︎
tab ✔︎ 步骤条组件 ✔︎

版本

  • 2.2.0

兼容性

  • 基于Vuejs2.x
  • 现代浏览器及IE10+

关于ElementUI的四个设计原则

一致性 Consistency

  • 与现实生活一致： 与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
  • 在界面中一致： 所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。

反馈 Feedback

  • 控制反馈： 通过界面样式和交互动效让用户可以清晰的感知自己的操作；
  • 页面反馈： 操作后，通过页面元素的变化清晰地展现当前状态。

效率 Efficiency

  • 简化流程： 设计简洁直观的操作流程；
  • 清晰明确： 语言表达清晰且表意明确，让用户快速理解进而作出决策；
  • 帮助用户识别： 界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。

可控 Controllability

  • 用户决策： 根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
  • 结果可控： 用户可以自由的进行操作，包括撤销、回退和终止当前操作等。

关于ElementUI的优势

  • 持续迭代 : Element发版至今release了四十多个版本，之前平均都是一周一个小版本更新。

  • 有大厂背景 : 是饿了么团队为其前端团队开发的一组前端组件，虽然核心开发只有三个人，但至少不用担心哪天就不维护

  • 生态圈优异，社区活跃 ：其 contributors已经有160多人，社区里也有很多基于Element 的拓展组件，也有很多相关的qq讨论群。

  • 社区的认可:目前Element已经是vue相关最多star的开源项目了，体现出了社区对其的认可。

关于Axios的特点

  • 从浏览器中创建XMLHttpRequests
  • 从 node.js 创建http请求
  • 支持PromiseAPI
  • 拦截请求和响应
  • 转换请求数据和响应数据
  • 取消请求
  • 自动转换 JSON 数据
  • 客户端支持防御XSRF

关于Axios的对浏览器的支持情况

Axios的安装和使用

安装

qinweideMBP:vue-element qinwei$ npm install axios --save

使用

  • axios.request(config)
  • axios.get(url[, config])
  • axios.delete(url[, config])
  • axios.head(url[, config])
  • axios.post(url[, data[, config]])
  • axios.put(url[, data[, config]])
  • axios.patch(url[, data[, config]])

get请求

axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

post请求

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

results matching ""

    No results matching ""